<template>
    <div>
        <div class="header">
            <el-button @click="handleAddBefore">添加管理员</el-button>
            <el-button @click="fetchData">
                <el-icon>
                    <Refresh />
                </el-icon>
            </el-button>
        </div>


        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="220"></el-table-column>
            <el-table-column prop="adminname" label="用户名" width="220"></el-table-column>
            <el-table-column prop="role" label="权限" width="220">
                <template #default="{ row }">
                    <el-tag type="success">
                        {{ row.role === 1 ? "管理员" : "超级管理员" }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="操作" width="220">
                <template #default="{ row }">
                    <el-button @click="handleEdit(row)">编辑</el-button>
                    <el-button @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <el-drawer v-model="drawer">
                <template #title>
                    <h4>添加管理员</h4>
                </template>
                <template #default>
                    <el-form :model="formData" ref="formRef" label-width="120px" :rules='formRules'>
                        <el-form-item label="账号" prop="adminname">
                            <el-input v-model="formData.adminname" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password" >
                            <el-input v-model="formData.password" :disabled="handleType === 2" />
                        </el-form-item>
                        <el-form-item label="身份" prop="role">
                            <el-select v-model="formData.role" placeholder="身份选择">
                                <el-option value="1" label="管理员" />
                                <el-option value="2" label="超级管理员" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="菜单权限" prop="checkedKeys">
                            <!-- tree 的勾选数据，需要通过方法去主动获取 -->
                            <el-tree ref="treeRef" :data="treeData" node-key="name" show-checkbox default-expand-all />
                        </el-form-item>
                    </el-form>
                </template>
                <template #footer>
                    <el-button v-if="handleType === 1" @click="handleAdd">添加</el-button>
                    <el-button v-else @click="handleEditConfirm">更新</el-button>
                </template>
            </el-drawer>
        </div>
    </div>
</template>

<script>
import { menus } from '@/router/index.js'
import { addManager, getManagerList, delManager, updateManager } from '@/api/user.js'
export default {
    name: 'manager-list',
    data() {
        return {
            tableData: [],
            drawer: false,
            treeData: [],
            handleType: 1,
            formData: {
                adminname: "",
                password: "",
                role: "",
                checkedKeys: [],
            },
            formRules: {
                adminname: [{ required: true, message: "请填写" }],
                password: [{ required: true, message: "请填写" }],
                role: [{ required: true, message: "请填写" }],
                checkedKeys: [{ required: true, message: "请填写" }],
            },
        }
    },
    methods: {
        // 每次添加管理员把数据都清空
        async handleAddBefore() {
            // 添加模式
            this.handleType = 1;
            // 打开抽屉
            this.drawer = true;
            this.formData.adminname = "";
            this.formData.password = "";
            this.formData.role = "";
            this.formData.checkedKeys = [];
            this.$nextTick(() => {
                this.$refs.treeRef.setCheckedKeys([]);
            });
        },
        initTreeData() {
            const tmp = menus.filter((item) => !item.hidden);
            this.treeData = tmp;
        },
        fetchData() {
            this.filterData()
        },

        // 点击添加按钮
        async handleAdd() {
            try {
                const list1 = this.$refs.treeRef.getCheckedKeys();
                const list2 = this.$refs.treeRef.getHalfCheckedKeys();
                this.formData.checkedKeys = [...list1, ...list2]
                await this.$refs.formRef.validate();
                addManager(this.formData).then((data) => {
                    console.log("添加成功");
                    this.drawer = false;
                    this.fetchData();
                });
            } catch (error) {
                console.error(error);
            }
        },

        filterData() {
            getManagerList().then((data) => {
                this.tableData = data.data
            })
        },
        handleDelete(row) {
            delManager(row.adminid).then((data) => {
                console.log('删除成功');
                this.filterData()
            })
        },
        async handleEdit(row) {
            this.drawer = true
            this.handleType = 2;
            //  updateManager(){
            this.formData.adminname = row.adminname;
            this.formData.password = row.password;
            this.formData.role = row.role + "";
            // 上面三个字段，是跟页面做了双向数据绑定的，所以是OK的。
            // 这里的 checkedKeys 需要我们通过别的方式去勾选。
            // TODO
            this.formData.checkedKeys = row.checkedKeys;
            this.$nextTick(() => {
                console.log(row.checkedKeys, "=====");
                this.$refs.treeRef.setCheckedKeys(["banner"]);
            });
            console.log(this.formData, row);
        }
    },
    mounted() {
        this.initTreeData()
        this.filterData()
    },
}
</script>

<style scoped>
.el-table-column {
    text-align: center;
}

.header,
.footer {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
}

.el-tree {
    margin-top: 20px;
}
</style>